<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ATM-模拟</title>
    <script src="sdk/jquery-1.10.min.js"></script>
    <style>
        body, html {
            margin: 0;
            height: 100%;
        }

        label {
            font-size: 25px;
            font-weight: bold;
            color: white;
        }

        input {
            height: 28px;
            margin-bottom: 50px;
            outline-style: none;
            border: 1px solid #ccc;
            font-size: 20px;
            font-weight: bold;
        }

        .content {
            margin: 0 auto;
            width: max-content;
        }

        button {
            height: 85px;
            width: 200px;
            background-color: #d7d7d7;
            font-size: 20px;
            font-weight: bold;
            border: 0;
        }
    </style>
</head>
<body>
<div style="margin: 0 auto;overflow: hidden;height: 15%;">
    <div style="float: left;margin: 10px;">
        <img src="img/信工logo.jfif" width="100px" alt="信工logo">
    </div>
    <div style="float: left;margin-left: 10px;">
        <span style="font-size: 50px;font-weight: bold;">中国儿童银行</span>
        <br>
        <span style="font-size: 35px;font-weight: bold;">China Child Bank</span>
    </div>
</div>

<div style="background-color: #330099;overflow: hidden;height: 85%;">
    <div style="float: right;width: 15%;">
        <button onclick="login()"
                style="margin-top: 720px;border-bottom-left-radius: 10px;border-top-left-radius: 10px;box-shadow: -1px 1px 5px black;float: right">
            登录 <br> Login in
        </button>
    </div>
    <div style="width: 70%;margin: 200px auto;margin-bottom: 0;float: right;">
        <div class="content">
            <label for="accountNo">卡号:</label>
            <input type="text" id="accountNo" value=""/>
        </div>
        <div class="content">
            <label for="password">密码:</label>
            <input type="password" id="password" value=""/>
        </div>
    </div>
</div>
<script>
    function login() {
        $.ajax(
            {
                url: "http://localhost:8888/atm/api/login",
                type: "POST",
                contentType: "application/json",
                datatype: "json", // 返回的数据格式
                data: JSON.stringify({
                    accountNo: $("#accountNo").val(),
                    password: $("#password").val(),
                }),
                success: function (res) {
                    localStorage.setItem("token", res.data.token)
                    window.location = "./index.html?accountNo=" + res.data.accountNo
                },
                error: function () {
                    alert("登录失败")
                }
            }
        )
    }
</script>
</body>
</html>